<template>
  <div class="projectList">
    <van-search 
      v-model="queryForm.projectName" 
      placeholder="搜索" 
      right-icon="search"
      left-icon=""
      @change="init"
    />
    <div class="projectList-map">
      <tMap
        ref="tMapEl"
        :showLegends="true"
        :config="data.mapConfig"
      ></tMap>
    </div>
    <div class="projectList-table">
      <van-button 
        round 
        type="success"
        class="projectList-table--btn"
      >项目列表</van-button>
      <ysnTable
        :data="data.projectTableList"
        :column="data.projectTableConfig"
        @row-click="rowClick"
      >
        <template #money>
          <van-icon color="#28A9A2" name="arrow" />
        </template>
      </ysnTable>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onActivated, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import tMap from '@/components/map/index.vue'
import { config } from './config'
import baseStore from "@/store";
import { ProjectListApi } from "@/api/projectList";
const tMapEl = ref()
const store = baseStore()
let router = useRouter()
let data = reactive({
  mapConfig: {
    legendList: [...store.baseCompany].splice(1)
  },
  projectTableList: [],
  projectTableConfig: []
})
let queryForm = reactive({
  projectName: ''
})
function rowClick(row:any){
  router.push({
    path: 'projectInfo',
    query: {
      projectId: row.projectId,
      projectName: row.projectName
    }
  })
  console.log(row)
}
config(data)

init()
function init(){
  Promise.all([
    ProjectListApi.project(queryForm),
    ProjectListApi.pageList({
      projectCode: queryForm.projectName
    }),
  ]).then(res => {
    res.forEach((val, index: number) => {
      switch (index) {
        case 0:
          setMarker(val)
          break;
        case 1:
          data.projectTableList = val.results
          break;
        default:
          break;
      }
    });
  })
}

function setMarker(val: any[]) {
  let styles: any = {}
  let geometries: marker [] = val.map((item) => {
    styles[item.projectCode] = new TMap.MarkerStyle({
      width: 25,
      height: 25,
      anchor: { x: 16, y: 32 },
      src:'/ys-amp-web/bi/map/project/icon?color=' + item.color?.slice(1)
    })
    return {
      id: item.projectCode,
      styleId: item.projectCode,
      // content: item.projectName,
      position: new TMap.LatLng(item.latitude,item.longitude),
      properties: {
        title: 'marker'
      }
    }
  })
  tMapEl.value.setMarker(geometries,styles)
}


onActivated(() => {
  queryForm.projectName = ''
  init()
})
</script>

<style lang="scss">
.projectList{

  &-map{

    & .TMap{
      height: 38rem;
      margin-top: 2.4rem;
      border: 0.1rem solid $spare16;
    }

  }

  &-table{
    padding-top: 2.4rem;
    padding-bottom: 1rem;
    &--btn{
      margin-bottom: 1rem;
    }
  }

}
</style>